<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>测试页面</title>
</head>

<body>
  <h2>测试用网页</h2>
  <button>测试事件</button>
  <button class="pickerPhoto">相册服务</button>
  <button id="pickerCamera">拍照服务</button>
  <button id="getAreaColumns">省市区服务</button>
  <img style="width: 100px;" src="" alt="">
  <p></p>
  <script>
    const button = document.querySelector("button");
    button.addEventListener("click", () => {
      mk.sayHi("测试一下注入的sayHi方法");
      console.log(window.mk);
      // mk.sayHi("测试一下注入的sayHi方法");
      console.log("mk对象", window.mk);
      // 查询用户信息，并写入到 p 标签中
      const userInfo = mk.queryUser();
      document.querySelector("p").innerText = JSON.stringify(userInfo);



      // mk.removeUser();
    });
    // 相册服务
    const pickerPhoto = document.querySelector('.pickerPhoto')
    pickerPhoto.addEventListener('click', async () => {
      const str = await mk.pickerPhoto()
      console.log(str)
      document.querySelector('img').src = `data:image/jpeg;base64,${str}`
    })
    // 拍照服务
    const pickerCamera = document.querySelector('#pickerCamera')
    pickerCamera.addEventListener('click', async () => {
      const str = await mk.pickerCamera()
      console.log(str)
      document.querySelector('img').src = `data:image/jpeg;base64,${str}`
    })
    // 省市区服务
    const getAreaColumns = document.querySelector('#getAreaColumns')
    getAreaColumns.addEventListener('click', async () => {
      const res = await mk.getAreaColumns()
      console.log(res)
    })
  </script>
  <!-- 引入调试控制台 -->
  <script src="./eruda.min.js"></script>
  <script>
    eruda.init();
  </script>
</body>

</html>